<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_class和style绑定</title>
    <style>
        .aClass {
            color: red;
        }

        .bClass {
            color: blue;
        }

        .cClass {
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="test">
    <h2>1. class绑定: :class = 'xxx'</h2>
    <!--这里a是一个字符串 通过方法改变字符的值  对应到class标签后再到style中找到对应的class-->
    <!--这里还可以加一个静态的class-->
    <p class="cClass" :class="a">xxx是字符串</p>
    <p :class="{aClass: isA,bClass:isB}">xxx是个对象</p>
    <p :class="['aClass','cClass']">xxx是个数组</p>

    <h2> 2. style绑定</h2>
    <!--可以理解:style 后面是js语法-->
    <p :style="{color:activeColor,fontSize:fontSize + 'px'}">hello world</p>

    <button @click="update">更新</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript">
    new Vue({
        el: '#test',
        data: {
            a: 'aClass',
            isA: true,
            isB: false,
            activeColor: 'red',
            fontSize: 20
        },
        methods: {
            update() {
                this.a = 'bClass'
                this.isA = false
                this.isB = true
                this.activeColor = 'green'
                this.fontSize = 30
            }
        }
    })

</script>
</body>
</html>